<template>
    <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="行政公告" name="free">
            <el-row>
                <div></div>
            </el-row>
            <el-row>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        border
                        stripe
                        :highlight-current-row="true"
                        :header-cell-style="{ background: '#ededed', color: '#333' }"
                >
                    <el-table-column prop="data" align="center" label="日期" />
                    <el-table-column prop="tit" align="center" label="标题">
                        <template slot-scope="scope">
                            <el-button type="text" @click="detail()">
                                {{ scope.row.tit }}
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" align="center" label="名单" />
                </el-table>
            </el-row>

            <el-pagination
                    class="text-right"
                    background
                    :current-page="1"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="0"
            />
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    export default {
        name: 'section',
        data() {
            return {
                activeName: 'free',
                form: {
                    data: '',
                    tit: '',
                    name: '',
                },
                tableData: [
                    {
                        data: '2020-09-03 17:06:38',
                        tit: '支部生活社商城立项书',
                        name:
                            '刘鹏飞 李悦凯 吴春鹤 刘蕊 李志恒 高强 侯林林 孙浩罡 李雪健 刘长江 姜玉龙 刘一波 霍英建 钟凯强 刘欣',
                    },
                    {
                        data: '2020-09-03 17:05:44',
                        tit: '天津演艺集团官网立项书',
                        name:
                            '刘鹏飞 吴春鹤 刘蕊 李志恒 侯林林 孙浩罡 张淼 李雪健 李悦凯 刘长江 姜玉龙 霍英建',
                    },
                ],
            };
        },
        methods: {
            detail() {
                this.$alert('ihsuadg', '预览', {
                    dangerouslyUseHTMLString: true,
                });
            },
        },
    };
</script>

<style scoped>
    .text-right{
        float: right;
    }
</style>